import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, Swiper, Button } from "antd-mobile"
import { getUrl } from "../../utils/request"
import "./style.scss"
const Index = () => {
    const navigate = useNavigate()
    const [colors, setColors] = useState([])
    const http = async () => {
        const res = await getUrl('/getImgs')
        console.log(res.data.results)
        setColors(res.data.results)
    }
    useEffect(() => {
        http()
    }, [])
    const items = colors.map((color, index) => (
        <Swiper.Item key={index}>
            <img src={color.url} alt="" />
        </Swiper.Item>
    ))
    return (
        <div>
            <NavBar>主页</NavBar>
            <Swiper autoplay>{items}</Swiper>
            <Button onClick={() => navigate('/talks')}>文章</Button>
        </div>
    );
}

export default Index;
